<template>
    <div class="pager-container" v-if="pageNumberCom>=1">
        <a @click="handleClick(1)" :class="{disabled:pagerCom.current ===1}">
            |&lt;&lt;
        </a>
        <a @click="handleClick(pagerCom.current-1)" :class="{disabled:pagerCom.current ===1}">
            &lt;
        </a>
        <a
            @click="handleClick(n)"
            v-for="(n,i) in numbersCom"
            :key="i"
            :class="{active: n===pagerCom.current}"
            >
        {{ n }}
        </a>
        <a @click="handleClick(pagerCom.current+1)" :class="{disabled:pagerCom.current ===pageNumberCom}">
            &gt;
        </a>
        <a @click="handleClick(pageNumberCom)" :class="{disabled:pagerCom.current ===pageNumberCom}">
            &gt;&gt;|
        </a>    
    </div>
   
</template>
<script setup lang='ts'>
import { PropType, computed, onMounted, ref } from 'vue';
import { InterfacePagerI } from './pagerType';

    //#region defineXxx
    defineOptions({
        name:'Pager'
    });

    const pagerDefaultObj:InterfacePagerI={
        total:0,
        limit:10,
        current:1,
        visibleNumber:5
    }

    const props=defineProps({
        pagerInfo:{
            type:Object as PropType<Partial<InterfacePagerI>>,
            required:true
        }
    });

    const pagerCom=computed(()=>{
        // console.log(Object.assign({},pagerDefaultObj,props.pagerInfo));
        
        return Object.assign({},pagerDefaultObj,props.pagerInfo);
    })

    onMounted(()=>{
     
    })


    const emit = defineEmits<{
        pageChange:[newPage:number],
    }>();
    //#endregion

    const pageNumberCom=computed(()=>{
        let n;
        if(Math.ceil(pagerCom.value.total/pagerCom.value.limit)<1){
            n=1;
        }else{
            n=Math.ceil(pagerCom.value.total/pagerCom.value.limit);
        }
        return n;
    });

    const visibleMinCom=computed(()=>{
        let min=pagerCom.value.current-Math.floor(pagerCom.value.visibleNumber/2);
        if(min<1){
            min=1;
        }
        return min;
    })

    const visibleMaxCom=computed(()=>{
        let max=visibleMinCom.value+pagerCom.value.visibleNumber-1;
        if(max>pageNumberCom.value){
            max=pageNumberCom.value;
        }
        return max;
    });

    const numbersCom=computed(()=>{
        let nums=[];
        for (let index = visibleMinCom.value; index <= visibleMaxCom.value ; index++) {
            nums.push(index);
        }
        return nums;
    });

    const handleClick=(newPage:number)=>{
        if(newPage<1){
            newPage=1;
        }
        if(newPage>pageNumberCom.value){
            newPage=pageNumberCom.value;
        }
        if(newPage===pagerCom.value.current){
            return ;
        }
        emit('pageChange',newPage);
    }


    
    
</script>
<style lang='less' scoped>
    .pager-container{
        display: flex;
        justify-content: center;
        margin: 20px 0;
        a{
            color: @primary;
            margin: 0 6px;
            cursor: pointer;
            &.disabled{
                color: @lightWords;
                cursor: not-allowed;
            }
            &.active{
                color: @words;
                font-weight: bold;
                cursor: text;
            }
        }
    }
</style>